import React, { Component } from 'react'
import { HeaderContainer, ListNavContainer } from './TeslaStyle'
import { withRouter } from 'react-router-dom'
import TeslaList from './TeslaList'
import { get } from 'utils/http'


@withRouter
class Tesla extends Component {
    state = {
        nav: '1',
        tesla: {},
        teslaList: [],
        params: {}
    }
    componentDidMount() {
        this.getTeslaDetail()

        this.params = { page: '1', type: 'newest', order: 'replyTime' }
        this.getGenralList(this.params,this.tesla.topicId)
    }
    getTeslaDetail() {
        this.tesla = JSON.parse(localStorage.getItem('tesla'))
        if (!this.tesla) {
            this.props.history.push('/index/subject')
        }
        this.state.tesla = this.tesla
        this.setState({})
        // console.log( this.tesla)


    }
    setNavActiveStyle(id) {
        this.setState({
            nav: id
        })
        switch (id) {
            case '1':
                this.params = { page: '1', type: 'newest', order: 'replyTime' }

                break;
            case '2':

                this.params = { page: '1', type: 'newest', order: 'postTime' }

                break;
            case '3':

                this.params = { page: '1', type: 'hot', order: '' }

                break;
            case '4':

                this.params = { page: '1', type: 'essence', order: '' }

                break;
            default:
                break;
                
        }
        this.getGenralList(this.params,this.tesla.topicId)



    }

    async getGenralList(params,id) {
        // console.log(id)
        this.teslaList = await get({
            url: `http://h5test.wfdata.club/v1/topic/${id}/thread`,
            params,
            headers: {
                'X-Request-Id': 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2ZU6pldHMBk//l5L1Q+RDqF9MYuLFXxaPic0W60EC8gaA==',
                'X-Running-Env': 'Q3OVXEArMgZNlMHtAxpu7ONj6bFtJQXn/rvs04BOX697Tr585tFrKIfZg2KoeUpgvnQYU5SNJ6oll+TA3FcxhCSpa6SvJgmuq4xYqBNA20NJ8ldwleqG5XO+/pJxDWDxaNNMPz7ogAvZMCU05jjILfwfb4xVDID+l4bJCv3PvZscJDIQEUoUSJwLTyrr7tv+gqSf9UY9s9WYRpJ1JOgOJVE/R7GAEfmgKwxF17NRO5ggEi+HSU8VLk4VqV/x4hOj'
            }
        })
        this.setState({
            teslaList: this.teslaList.data.dataList
        })
    }
    backTosubject=()=>{
        // this.props.history.push('/index/subject')
        this.props.history.go(-1)
    }
    render() {
        return (
            <div style={
                {
                    display: "flex",
                    flexDirection: 'column',
                    height: '100%'
                }
            }>
                {this.state.tesla && <HeaderContainer>
                    <div className='backHome'>
                        <h1>
                            <i className="yo-ico" onClick={this.backTosubject}>&#xe743;</i>
                        </h1>
                    </div>
                    <div className="titleIcon">
                        <div className="icon">
                            <img src={this.state.tesla.topicIcon} alt="" />
                        </div>
                        <div className="content">
                            <h1> {this.state.tesla.topicName} <span>{this.state.tesla.threadCount}</span></h1>
                            <p>{this.state.tesla.fid}人已关注</p>
                        </div>
                        <div className="label">
                            <span>
                                关注
                            </span>
                        </div>
                    </div>
                </HeaderContainer>}

                <ListNavContainer>
                    <ul>
                        <li onClick={() => this.setNavActiveStyle('1')} className={this.state.nav == '1' ? 'active' : ''}>最新回复</li>
                        <li onClick={() => this.setNavActiveStyle('2')} className={this.state.nav == '2' ? 'active' : ''}>最新发表</li>
                        <li onClick={() => this.setNavActiveStyle('3')} className={this.state.nav == '3' ? 'active' : ''}>热门</li>
                        <li onClick={() => this.setNavActiveStyle('4')} className={this.state.nav == '4' ? 'active' : ''}>精华</li>
                    </ul>
                </ListNavContainer>


                {this.state.teslaList[0] && <TeslaList list={this.state.teslaList}></TeslaList>}
            </div>
        )
    }
}
export default Tesla
